The idea I want is to have a button offset from parent so that when its clicked the card flips. I made the "flip card" animation work on Chrome yet on Safari(Mobile-IOS) there seems to be a "glitch" with the animation where the button gets "cut-off" for a moment making the animation not behave the way I want it (Works as intended on Chrome). I have added the "--webkit-" prefix to the CSS rules that got the animation to work somewhat. Anything I have missed?
window.onload = function() {
FlipperBtns = document.getElementsByClassName('flipper');
Array.from(FlipperBtns).forEach(function(element) {
element.addEventListener('click', function() {
element.parentNode.getElementsByClassName('flip-container')[0].classList.toggle('is-flipped');
}, false);
});
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.flipping-frame-container {
position: relative;
margin: auto;
margin-bottom: 15px;
width: 300px;
height: 300px;
background-color: pink;
border: orange solid 2px;
}
.flipper {
width: 60px;
height: 60px;
background-color: blue;
border-radius: 50%;
position: absolute;
bottom: -30px;
right: -30px;
border: orange solid 2px;
z-index: 4;
}
.flip-container {
display: inline-block;
width: 100%;
height: 100%;
perspective: 1000;
-webkit-perspective: 1000;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 0.6s;
-webkit-transition-delay: 60ms;
position: relative;
}
.is-flipped .front {
transform: rotateY(180deg);
--webkit-transform: rotateY(180deg);
backface-visibility: hidden;
--webkit-backface-visibility: hidden;
}
.is-flipped .back {
transform: rotateY(0deg);
--webkit-transform: rotateY(0deg);
}
.front,
.back {
width: 100%;
height: 100%;
background-color: white;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}<div class="flipping-frame-container">
<div class="flipper"></div>
<div class="flip-container">
<div class="front">Front</div>
<div class="back">Back</div>
</div>
</div>